<template>
    <div class="ludanbox">
        <div class="ludanleft" :class="psClass" >
            <div class="show" v-moveLD="a" v-html="a.html"></div>
        </div>
        <div class="ludanright">
            <div class="ludan_top" :class="psClass" >
                <div class="show" v-moveLD="b" v-html="b.html"></div>
            </div>
            <div class="ludan_middle">
                <div class="ludan_m_le" :class="psClass">
                    <div class="show" v-moveLD="c" v-html="c.html"></div>
                </div>
                <div class="ludan_m_ri" :class="psClass">
                    <div class="show" v-moveLD="f" v-html="f.html"></div>
                </div>
            </div>
            <div class="ludan_middle">
                <div class="ludan_m_le" :class="psClass">
                    <div class="show" v-moveLD="d" v-html="d.html"></div>
                </div>
                <div class="ludan_m_ri" :class="psClass">
                    <div class="show" v-moveLD="e" v-html="e.html"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"Luand",
	template:"#Ludan",
	props:["model"],
	data(){
		return {
			a:{html:""},
			b:{html:""},
			c:{html:""},
			d:{html:""},
			e:{html:""},
			f:{html:''},
			psClass:"",
		}
	},
	watch:{
		model(newVal,oldVal){
			if(newVal.data!=oldVal.data){
				if(newVal.data===''){
					this.a.html="<div class='show'></div>";
					this.b.html="<div class='show'></div>";
					this.c.html="<div class='show'></div>";
					this.d.html="<div class='show'></div>";
					this.e.html="<div class='show'></div>";
					this.f.html="<div class='show'></div>";
				}else if(newVal.data.length<oldVal.data.length){
					this.a.html="<div class='show'></div>";
					this.b.html="<div class='show'></div>";
					this.c.html="<div class='show'></div>";
					this.d.html="<div class='show'></div>";
					this.e.html="<div class='show'></div>";
					this.f.html="<div class='show'></div>";
					this.$emit('postMessage',{data:newVal.data,model:this.model.models})
				}else{
					this.$emit('postMessage',{data:newVal.data,model:this.model.models})
				}
			}
		}
	},
	// 自定义监控路单长度移动指令
	directives:{
		moveLD:{
			update(el,bind){
				if(bind.value!=bind.oldValue){
					// 获取子节点数组
					var chil=el.childNodes;
					if(chil.length<=1){
						return false;
					}
					// 获取最后一位的位移
					var leftPosi=parseInt(chil[chil.length-1].style.left);
					// 获取最长长度
					var left=bind.value.divWdith;
					var width=parseInt(chil[1].style.width);
					var paretWidth=parseInt(el.clientWidth);
					// 计算自动偏移的像素单位位置
					var leftWidth=(((leftPosi+width-49)*-0.01)*paretWidth)/paretWidth*100;
					// 获取最长长度
					var leftWidth2=((left+width-49)*-0.01)*paretWidth;
					// 设置屏障长度大于盘珠
					chil[0].style.width=Math.ceil((left+width)*0.01)*100+"%";
					// 是否超出100宽度
					if(left>95){
						// 设置显示框移动到
						el.style.left=leftWidth+"%";
						// 绑定拖动函数
						chil[0].onmousedown=function(event){
							// 首次鼠标位置
							var oneX=event.pageX;
							// 获取原DOM位移的数据
							var oldLeft=parseInt(el.style.left)/100*paretWidth;
							
							chil[0].onmousemove=function(event){
								// 获取移动距离
								var newX=oldLeft+event.pageX-oneX;
								// 禁止移动超出最开始处
								if(newX>0){
									newX=0;
								}else if(newX<leftWidth2-80){//禁止移动超出元素宽度
									newX=leftWidth2-80;
								}
								el.style.left=newX+"px";
							}
						}
						chil[0].onmouseup=function(){
							chil[0].onmousemove=null;
							let oldLetf=el.style.left
							if(oldLetf.indexOf("%")!=-1){
								return false;
							}
							oldLetf=parseInt(oldLetf);
							el.style.left=(oldLetf/paretWidth*100)+"%";
							chil[0].onmousemove=null;
						}
						chil[0].onmouseout=function(){
							chil[0].onmousemove=null;
						}
					}else{
						//小于100%超度，恢复位移为0
						el.style.left="0px";
					}
				}
			}
		}
	},
	methods:{
		// 路问庄函数
		tabLudan(x){
			if(x===0){
				// this.$root.workerObj.postMessage({data:this.model.data+"a",model:this.model.models,w:true});
				this.$emit('postMessage',{data:this.model.data+"a",model:this.model.models,w:true})
			}else{
				// this.$root.workerObj.postMessage({data:this.model.data+"e",model:this.model.models,w:true});
				this.$emit('postMessage',{data:this.model.data+"e",model:this.model.models,w:true})
			}
			this.psClass="and"
			setTimeout(()=>{
				this.psClass='';
				// this.workerObj.postMessage({data:this.model.data,model:this.model.models});
				this.$emit('postMessage',{data:this.model.data,model:this.model.models})
			},6000)
		},
		setLudan(msg){
			switch(msg.id){
				case 1:
					this.a=msg;
					break;
				case 2:
					this.b=msg;
					break;
				case 3:
					this.c=msg;
					break;
				case 4:
					this.d=msg;
					break;
				case 5:
					this.e=msg
					break;
				case 6:
					this.f=msg;
				break;
				case 7:
					this.$emit("setLwz",msg.html);
				break;
				case 8:
					this.$emit("setLwx",msg.html);
				break;
			}
		}
	},
	mounted(){
		// 重置路由
		if(this.model.data){
			this.$emit('postMessage',{data:this.model.data,model:this.model.models})
		}
	},


}
</script>
